import PropTypes from 'prop-types';
import React, { memo } from 'react';
import { LongforWrapper } from './style';
import SectionHeader from 'src/compoments/section-header';

import LongforItem from 'src/compoments/longfor-item';
import ScrollView from 'src/base-ui/scroll-view';

const SectionLongfor = memo((props) => {
  const { infoData } = props;
  return (
    <LongforWrapper>
      <SectionHeader title={infoData.title} subTitle={infoData.subtitle} />
      <div className="longfor">
        <ScrollView>
          {infoData.list.map((item) => {
            return <LongforItem itemData={item} key={item.city}></LongforItem>;
          })}
        </ScrollView>
      </div>
    </LongforWrapper>
  );
});

SectionLongfor.propTypes = {
  infoData: PropTypes.object,
};

export default SectionLongfor;
